<template>
  <!-- 点菜 -->
  <div class="demo-datetime-picker">
    <p>点菜</p>
    <div class="souSuo">
      <span>筛选:</span>
      <div class="cai">
        <span>菜品名称:</span>
        <el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入菜品名称">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <!-- 搜索框1 -->
      <div class="suo1">
        <span>菜品状况:</span>
        <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" /> </el-select>
      </div>
      <!-- 搜索框2 -->
      <div class="suo1">
        <span>菜品分类:</span>
        <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" /> </el-select>
      </div>
      <!-- 按钮 -->
      <button class="butt">查询</button>
    </div>
  </div>
  <!-- 切换 -->

  <el-row :gutter="20" class="cq">
    <el-col :span="24">
      <div class="grid-content ep-bg-purple" fill="#ffae00">
        <div class="cq1">
          <span></span>
          <ul class="ul1">
            <RouterLink class="item" v-for="(item, index) in list" :class="{ 'bg-red': index === active }" @click="active = index" :key="item.title" :to="'/home/diancai/dianping' + item.url"> {{ item.title }}</RouterLink>
          </ul>
          <span @click="sx"
            ><el-icon><Refresh /></el-icon><span>刷新</span></span
          >
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref } from 'vue'

const value = ref('')
const list = ref([
  {
    title: '菜品',
    url: '/caip',
  },
  {
    title: '饮品',
    url: '/yinp',
  },
  {
    title: '烤肉',
    url: '/kaor',
  },
  {
    title: '甜品',
    url: '/tianp',
  },
])
const active = ref(0)
const options = [
  {
    value: '鱼香肉丝',
    label: '鱼香肉丝',
  },
  {
    value: '番茄鸡蛋',
    label: '番茄鸡蛋',
    // disabled: true,
  },
  {
    value: '红烧牛肉',
    label: '红烧牛肉',
  },
]
</script>

<style lang="less" scoped>
// 搜索
.demo-datetime-picker {
  height: 100px;

  background-color: #fff;
  p {
    font-size: 15px;
    height: 26px;
    text-align: center;
    line-height: 40px;
  }
  .souSuo {
    display: flex;
    justify-content: space-between;
    padding: 20px 16px;

    span {
      font-size: 16px;

      margin-top: 8px;
      margin-right: 6px;
    }
    .cai {
      display: flex;
      span {
        margin-top: 8px;
        margin-right: 6px;
      }
    }
    .suo1 {
      display: flex;
      span {
        margin-top: 8px;
        margin-right: 6px;
      }
    }
    .suo2 {
      display: flex;
      span {
        margin-top: 8px;
        margin-right: 6px;
      }
    }
    // 按钮
    .butt {
      height: 32px;
      width: 80px;
      background-color: #ffd000a2;
      border-radius: 4px;

      color: #f5f5f5;
      border: none;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
}
.el-table_1_column_2 {
  height: 33px;
}

//切换
.cq {
  width: 100%;
  height: 40px;
  padding: 11px 30px;
  display: flex;
  justify-content: space-between;
  .cq1 {
    display: flex;
    justify-content: space-between;
    span {
      text-align: center;
      font-size: 18px;
      line-height: 40px;
      color: #888888;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-icon {
        font-size: 26px;

        justify-content: center;
      }
    }
    ul {
      width: 800px;
      height: 40px;
      background-color: #fff;
      display: flex;
      border-radius: 4px;

      .item {
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
        color: #e0e0e0;
      }
      .item {
        border-right: none;
      }
      .item:nth-last-child(1) {
        border-right: 1px solid #ccc;
      }
    }
  }
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

// 点击颜色
.bg-red {
  background-color: #ffd000c4;
  color: #fff !important;
}
</style>
